<template>
	<view class="m-framework">
		<u-navbar :fixed="false" :title="navTitle" :autoBack="false" :safeAreaInsetTop="true" style="width: 100%;">
			<view class="LeftBox" slot="left">
				<slot name="navLeft">
					<!-- <view class="x-f">
						<u-icon name="home-fill" color="#ffffff" size="28"></u-icon>

						<view class="x-f" style="font-size: 12px;color: #fff;margin-left: 10px;">
							<text>01号注塑机</text>
							<text>【xxx】</text>
							<text style="margin-right: 2px;">2024-09-25 08:45:10</text>
							<text>白班</text>
						</view>
					</view> -->
				</slot>
			</view>

			<view class="RightBox" slot="right">

				<view class="x-f" style="font-size: 12px;color: #fff;max-width: 200px;">
					<view>
						<text>当前时间：</text>
						<text>{{currentTime}}</text>
					</view>

					<slot name="navRight">
						<u-button style="width: fit-content;" text="下载并退出" color="#dbb56a" size="mini"></u-button>
					</slot>
				</view>
			</view>
		</u-navbar>

		<view class="workbench">
			<slot name="workbench">

			</slot>
		</view>


		<view class="m-framework_main">
			<slot></slot>
		</view>


		<view class="m-framework_bottom x-f">
			<slot name="bottom">

				<u-navbar :fixed="false" :autoBack="false" :safeAreaInsetTop="false" :height="30"
					:bgColor="bgColor + '!important'" style="width: 100%;">

					<view class="m-framework_bottom-version bottomText" slot="left" v-show="version">
						<slot name="bottomLeft">
							<text>当前版本：</text>
							<text>{{version}}</text>
						</slot>
					</view>

					<view class="m-framework_bottom-company bottomText" slot="center">
						<slot name="bottomCenter">

						</slot>
					</view>

					<view class="m-framework_bottom-status bottomText x-c" slot="right">
						<slot name="bottomRight">
							<view class="x-f">
								<text>当前登录:</text>
								<text>【{{networkType}}】</text>
							</view>

							<view class="x-f" style="margin-left: 4px;">
								<text>当前网络:</text>
								<view style="width: 14px;height: 14px;border-radius: 9999px;"
									:style="{backgroundColor: isConnected ? '#63df5a' : '#ff3029'}"></view>
							</view>
						</slot>
					</view>
				</u-navbar>
			</slot>
		</view>

	</view>
</template>

<script>
	export default {
		name: "m-framework",
		props: {
			navTitle: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: '#51d0d0'
			}
		},
		data() {
			return {
				version: null, // 本机版本号
				networkType: null,
				isConnected: true,
			};
		},
		created() {
			let that = this;
			// 获取版本
			this.version = plus.runtime.version;
			// 获取网络连接方式
			uni.getNetworkType({
				success: function(res) {
					that.networkType = res.networkType;

					if (res.networkType != 'none') {
						that.isConnected = true;
					} else {
						that.isConnected = false;
					}
				}
			});

			this.$store.dispatch('startUpdatingTime'); // 组件创建时启动时间更新 


			// 注册网络状态变化监听器  
			uni.onNetworkStatusChange(this.onNetworkStatusChange);
		},
		computed: {
			currentTime() {
				return this.$store.state.currentTimeString;
			}
		},
		onUnload() {
			// 取消网络状态变化监听器  
			uni.offNetworkStatusChange(this.onNetworkStatusChange);
		},
		beforeDestroy() {
			this.$store.dispatch('stopUpdatingTime'); // 组件销毁前停止时间更新  
		},
		methods: {
			onNetworkStatusChange(res) {
				console.log(res);
				if (res.isConnected) {
					this.isConnected = true;
					// 当网络连接后的逻辑  
					uni.showToast({
						title: "网络已连接"
					});
				} else {
					this.isConnected = false;
					// 当网络断开后的逻辑  
					uni.showToast({
						title: "网络已断开"
					});
					// 可以在这里处理网络断开后的逻辑，如显示提示信息、停止网络请求等  
				}
			},
		}
	}
</script>

<style lang="scss">
	.m-framework {
		height: 100vh;
		display: flex;
		flex-direction: column;

		&_main {
			flex: 1;
			background-color: #e7e7e7;
		}



		&_bottom {

			.bottomText {
				font-size: 12px;
				color: #fff;
			}

			&-company {
				text-align: center;
				flex: 1;
			}
		}
	}
</style>